<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transformationMartrix</title>
</head>
<body>
<canvas width="500" height="500" style="border: 1px solid #333333"></canvas>
</body>
<script type="module">
    import {createProgram,createShader} from './utils.js';

    const vSource = `
            attribute vec4 a_position;
            uniform mat4 u_xformMatrix;
            void main(){
                gl_Position = u_xformMatrix * a_position;
            }
        `;

    const fSource = `
            void main(){
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `;

    const canvas = document.querySelector('canvas');
    const gl = canvas.getContext('webgl');

    const vShader = createShader(gl,gl.VERTEX_SHADER,vSource);
    const fShader = createShader(gl,gl.FRAGMENT_SHADER,fSource);
    const program = createProgram(gl,vShader,fShader);
    gl.useProgram(program)

    const a_position = gl.getAttribLocation(program,'a_position');
    const vertexs = new Float32Array([
        0.0,  0.5,
        -0.5, -0.5,
        0.5,  -0.5
    ]);
    const glBuffer = gl.createBuffer(); // 创建缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER,glBuffer) // 绑定缓冲区对象
    gl.bufferData(gl.ARRAY_BUFFER,vertexs,gl.STATIC_DRAW) // 将数据写入缓冲区对象中
    gl.vertexAttribPointer(a_position,2,gl.FLOAT,false,0,0) // 将缓冲区对象分配给一个attribute变量
    gl.enableVertexAttribArray(a_position) // 开启attribute变量


    const u_xformMatrix = gl.getUniformLocation(program,'u_xformMatrix');
    // 在webgl中是列主序
    let angle = 13;
    const radian = angle * Math.PI / 180;
    const sinb = Math.sin(radian);
    const cosb = Math.cos(radian);
    const xformMatrix = new Float32Array([
        cosb,  sinb, 0.0, 0.0,
        -sinb, cosb, 0.0, 0.0,
        0.0,   0.0,  1.0, 0.0,
        0.0,   0.0,  0.0, 1.0,
    ]);

    // const xformMatrix = new Float32Array([
    //     1.0, 0.0, 0.0, 0.0,
    //     0.0, 1.0, 0.0, 0.0,
    //     0.0, 0.0, 1.0, 0.0,
    //     0.3, 0.3, 0.3, 1.0,
    // ]);
    gl.uniformMatrix4fv(u_xformMatrix,false,xformMatrix);

    gl.clearColor(0.0, 0.0, 0.0, 1.0)
    gl.clear(gl.COLOR_BUFFER_BIT)
    gl.drawArrays(gl.TRIANGLES,0,3)

</script>
</html>